<template>
    <div>
        <checkbox-tags
            :data="data"
            v-model="sysTags"
            :props="{ label: 'label', value: 'id' }"
        ></checkbox-tags>

        <input-tags v-model="userTags"></input-tags>

        <div class="btns">
            <el-collapse-transition>
                <div class="error" v-if="errorInfo">
                    {{ errorInfo }}
                </div>
            </el-collapse-transition>

            <el-button 
            type="primary" 
            @click="saveHandler"
            >
                保存
            </el-button>

            <el-button 
            v-if="closable" 
            @click="closeHandler"
            >
                暂时不选
            </el-button>
        </div>
    </div>
</template>

<script>
import checkboxTags from "./checkbox-tags";
import inputTags from "./input-tags";

export default {
    components: {
        checkboxTags,
        inputTags,
    },
    props: {
        closable: {
            type: Boolean,
            default: true,
        },
    },
    data: () => ({
        props: {
            label: "label",
            value: "label",
        },

        sysTags: [],
        userTags: [],

        errorInfo: "",

        data: [
            {
                label: "行业分类",
                children: [],
            },
            {
                label: "业务分类",
                children: [],
            },
            {
                label: "生活分类",
                children: [],
            },
        ],
    }),
    computed: {},
    methods: {
        checkHandler(item) {
            var value = item[this.props.value],
                index = -1;

            if (((index = this.value.indexOf(value)), ~index)) {
                // 取消选中
                this.value.splice(index, 1);
            } else {
                // 选中
                this.value.push(value);
            }
        },
        triggerError(str) {
            this.errorInfo = str;
        },
        saveHandler() {
            const that = this;
            if (!this.sysTags.length) {
                this.triggerError("请至少选中一个非自定义标签！");
                return;
            }

            this.triggerError("");

            //提交
            this.$post(
                `${this.$store.state.api.tbUrl}/setup/addtag.json`,
                {
                    ids: that.sysTags.toString(),
                    tags: that.userTags.toString(),
                },
                (data) => {
                    that.getTagList();
                    that.getSelectTagList();
                    this.$notify({
                        title: "成功",
                        message: "保存成功",
                        type: "success",
                    });
                }
            );

            this.visible = false;
            this.$emit("close");
        },
        closeHandler() {
            showConfirm(
                "若不设置标签，平台无法准确向您推荐您可能感兴趣的信息，是否继续关闭（关闭后可在“个人中心-设置”中进行该项目设置）",
                "warning",
                () => {
                    this.$emit("close");
                }
            );
        },
        /**
         * 获取标签合集
         */
        getTagList() {
            // 获取标签
            const that = this;
            this.$get(
                `${this.$store.state.api.tbUrl}/setup/getAlletags.json`,
                (data) => {
                    var itemMap = function (val) {
                        return val.map(function (item) {
                            return {
                                id: item.id,
                                label: item.name,
                            };
                        });
                    };
                    that.data[0].children = itemMap(data.systags1);
                    that.data[1].children = itemMap(data.systags2);
                    that.data[2].children = itemMap(data.systags3);
                    that.userTags = data.usertags.map(function (val) {
                        return val.name;
                    });
                }
            );
        },
        /**
         * 获取已选择标签合集
         */
        getSelectTagList() {
            const that = this;
            this.$get(
                `${this.$store.state.api.tbUrl}/setup/getliketags.json`,
                (data) => {
                    var itemMap = function (val) {
                        val = val || [];

                        return val.map(function (item) {
                            return item.id;
                        });
                    };

                    var arr1 = itemMap(data.systags1);
                    var arr2 = itemMap(data.systags2);
                    var arr3 = itemMap(data.systags3);

                    that.sysTags = [...arr1, ...arr2, ...arr3];
                }
            );
        },
    },
    mounted() {
        this.getTagList();
        this.getSelectTagList();
    },
};
</script>

<style lang="scss" scoped>
@import "@css/var.scss";

.error {
    color: $dangerColor;
    margin-bottom: 1em;
}

.btns {
    text-align: center;

    ::v-deep {
        .el-button {
            padding: 14px 44px;
        }
    }
}
</style>